Novedades de la Web

Rachel Andrew

Fecha de publicación: 20 de mayo de 2025

En la presentación principal de Novedades en la Web de Google I/O 2025, se compartieron todos los anuncios de Baseline, junto con una descripción de algunas de las funciones que se incorporaron a Baseline este año. Este fue un año increíble para la Web y para Baseline. Esta publicación es un resumen de todo lo que se mencionó, con todos los vínculos para obtener más información.

Panel de la plataforma web y funciones web

En 2024, anunciamos el lanzamiento inicial del panel de la plataforma web, que usa el conjunto de datos de funciones web y te permite explorar todas las funciones que forman parte del modelo de referencia.

Los datos de componentes web ya están completos, con todos los componentes de la plataforma asignados. A medida que se agregan funciones nuevas a Base de referencia cada mes, se actualizan los datos y todo esto se muestra en el panel.

Herramientas para ayudarte a descubrir tu propio objetivo de Baseline

Si bien puedes basar tu política de compatibilidad con navegadores en el objetivo móvil de Baseline ampliamente disponible (como la agencia del Reino Unido Clearleft), también puedes adoptar un objetivo fijo basado en un año de Baseline. Ahora puedes usar tus propios datos de usuarios, junto con los datos de componentes web, para determinar el mejor segmento para ti.

El año pasado, en I/O, anunciamos que RUMvision implementaría Baseline en su producto, y esta integración ya está disponible.

Debido a que usa tus datos de RUM, te ayuda a identificar qué año de Baseline debes adoptar basándote en esos datos en lugar de un promedio global. También puede ayudarte a ver si el nivel de Baseline ampliamente disponible es adecuado para ti.

También puedes usar tus datos de Google Analytics para ver con claridad qué porcentaje de tus usuarios admite cada objetivo de Baseline con el nuevo Verificador de Baseline de Google Analytics.

Estas son solo dos de una creciente colección de herramientas que te ayudan a asignar tus data de usuarios reales a Baseline.

Recientemente, el grupo de la comunidad de Web DX lanzó una extensión para Netlify que muestra compatibilidad con distintos años de Baseline y está disponible en tus sitios para ayudarte a decidir a qué segmentar en tus herramientas de compilación. Próximamente, se lanzarán integraciones con el producto RUM de Observatory de Cloudflare y Contentsquare.

Integra los datos con tus propias herramientas

Los datos de Web Features son abiertos y están disponibles para tus propias integraciones. Intentamos facilitar ese proceso.

Usa la API de Web Platform Dashboard o consume los datos de Web Features directamente desde el paquete npm.

Ahora puedes asignar versiones de navegadores a un objetivo de Baseline con el módulo baseline-browser-mapping del grupo comunitario WebDX del W3C. Este módulo se puede usar en un entorno de JavaScript del servidor o descargando archivos JSON o CSV que se actualizan a diario desde el repositorio.

Estos datos incluyen asignaciones no solo para el conjunto principal de navegadores de Baseline, sino también para navegadores descendentes, como Samsung Internet, Opera, UC Browser y Android Webview.

Descubre si tu objetivo de Baseline admite funciones

La información de referencia ahora se encuentra en la mayoría de las páginas de MDN y Can I Use, y también se puede encontrar en el panel de la plataforma web y en los artículos de web.dev y CSS Tricks. Sin embargo, para ello, debes buscar asistencia. Sería mucho más útil que la información del modelo de referencia se mostrara en tu IDE a medida que escribes código y como parte de todas las otras herramientas que usas.

Nos complace compartir contigo que muchas herramientas clave ahora tienen compatibilidad con Baseline integrada o se pueden integrar fácilmente.

browserslist-config-baseline

Muchas herramientas, como Babel y PostCSS, usan browserslist para determinar qué navegadores admitir.

Junto con el CG de WebDX y miembros de la comunidad, el equipo de Chrome ayudó a lanzar una nueva herramienta llamada browserslist-config-baseline. Esto te permite configurar tus objetivos de browserslist en términos de Baseline, como ampliamente disponible o años de Baseline.

Con esto, cualquier herramienta que tome un objetivo de browserslist ahora se puede expresar en términos de Baseline.

Obtén más información en Cómo usar Baseline con browserslist.

Modelo de referencia en linters: ESLint y Stylelint

Recientemente, el uso de Baseline con linters se hizo posible con algunas herramientas nuevas en el espacio de linters, comenzando con ESLint para CSS.

El modelo de Baseline de ESLint tiene una regla use-baseline. Puedes establecer esta opción en tu objetivo de Baseline preferido, y se te advertirá cuando uses funciones más recientes que tu objetivo. Puedes elegir cómo resolver esas advertencias: reemplazando esa función con primitivas o suprimiendo la advertencia del lint, que es una solución perfectamente válida cuando sabes que estás usando una función de vanguardia de forma segura, por ejemplo, si se trata de una mejora progresiva.

De forma predeterminada, ESLint no advertirá si se usan funciones más nuevas dentro de los bloques @supports, ya que los navegadores no compatibles no las evaluarán de todos modos.

Para tus necesidades de linting de HTML, también hay un complemento de la comunidad llamado html-eslint.

Stylelint admite oficialmente un complemento llamado stylelint-plugin-use-baseline. Esta regla se comporta de la misma manera que la regla de ESLint para CSS, pero se ejecuta en Stylelint.

Muchos linters también tienen complementos de IDE, por lo que puedes obtener comentarios inmediatos sobre el estado del modelo de referencia mientras codificas a través de subrayados ondulados.

Baseline en VS Code y JetBrains WebStorm

Muchos IDEs admiten desde hace mucho tiempo una forma de colocar el cursor sobre una función en el editor y ver la lista de versiones de navegador compatibles.

Sin embargo, puede ser bastante difícil comprender si esa función es realmente segura para su uso. Debes analizar mentalmente si falta algún navegador importante en esa lista y qué tan nueva es la versión del navegador.

Para solucionar ese problema, nos asociamos con el IDE más popular que usan millones de desarrolladores web, VS Code, para integrar los datos de Baseline directamente en estas tarjetas flotantes.

Ahora puedes colocar el cursor sobre una función para saber si se considera un modelo de referencia y durante cuánto tiempo, o si hay algún navegador importante que aún no la implementa por completo.

Entre las funciones admitidas, se incluyen las propiedades CSS, los elementos HTML y los atributos HTML. Obtén más información en Visual Studio Code ahora admite Baseline.

Esta integración significa que cualquier IDE basado en VS Code también se beneficiará de estas tarjetas flotantes.

Además, podemos anunciar que JetBrains implementará tarjetas flotantes en su IDE de JavaScript y TypeScript de WebStorm.

La Web está mejorando más rápido que nunca

Esperamos que Baseline te ayude a aprovechar el hecho de que la Web interoperable mejora más rápido que nunca.

Puedes usar el panel de la plataforma web para ver todas las funciones que se volvieron disponibles como Baseline recientemente en los últimos doce meses, desde Google I/O 2024.

También hay varias funciones que puedes estar seguro de que estarán disponibles en Baseline próximamente, ya que se incluyen en el proyecto Interop 2025. Puedes leer sobre todas las funciones incluidas en Interop2025: otro año de mejoras en la plataforma web.

Modos de escritura en sentido horizontal

Ya vimos que una función se convirtió en Baseline Newly available, los valores sideways-rl y sideways-lr para la propiedad writing-mode de CSS. Si usas un modo de escritura vertical solo para fines de diseño, es probable que los valores horizontales sean los que se alcancen.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Posicionamiento de los anuncios fijos

La posición del ancla se lanzó en Chrome 125. Te brinda una forma de vincular la posición de un elemento a un ancla, por ejemplo, cuando abres un cuadro de información con un botón.

Ahora se incluye en Interop 2025, por lo que deberíamos ver que se una a Baseline este año.

Métricas web esenciales: LCP e INP

API de LCP

API de Event Timing (para INP)

Las Métricas web pueden ayudarte a cuantificar la experiencia de tu sitio y a identificar oportunidades de mejora. El objetivo de la iniciativa Web Vitals es simplificar el panorama y ayudar a los sitios a enfocarse en las métricas más importantes: las Métricas web esenciales.

La interoperabilidad de 2025 incluye las métricas Largest Contentful Paint (LCP) y Interaction to Next Paint (INP) mediante la implementación de la API de LargestContentfulPaint y la API de Event Timing en todos los navegadores.

Mejoras en el elemento <details>

El elemento <details> ya está disponible en el modelo de referencia general. Se incluyó en Interop 2025, ya que hay varias funciones que hacen que los widgets de divulgación con <details> sean más útiles.

El elemento <details> contiene un elemento <summary>, que es la parte visible en la página cuando se contrae el elemento <details>. Fuera de <summary>, se encuentra el contenido del elemento <details>, que se oculta hasta que el usuario hace clic en el resumen.

Una de las cosas que se está haciendo interoperable durante Interop 2025 es ocultar el contenido con content-visibility en lugar de display, lo que significa que, si no se expande, el contenido no se renderizará en absoluto.

El pseudoelemento ::marker también forma parte del trabajo de Interop 2025. El seudoelemento ::marker te permite aplicar diseño al triángulo de divulgación del elemento <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Luego, otro pseudoelemento: ::details-content.

::details-content representa el contenido, la parte del elemento de detalles que se expande y se contrae, y te permite aplicarle diseño.

[open]::details-content {
  border: 5px dashed hotpink;
}

También hay algunas mejoras interesantes, como la expansión automática del elemento <details> con coincidencias de búsqueda en la página y la incorporación del valor until-found del atributo hidden de HTML a Baseline Newly available. Esto oculta un elemento hasta que se encuentra con la búsqueda en la página del navegador o se navega directamente a él siguiendo un fragmento de URL.

CSS @scope

La regla @scope de CSS te permite limitar el alcance de tus selectores. Cuando se establece una raíz de alcance con @scope, las reglas de estilo anidadas dentro de la regla de at solo se aplican a ese árbol del DOM.

Por ejemplo, si solo deseas segmentar elementos <img> dentro de un elemento con una clase de .card, .card se convertirá en la raíz de alcance.

@scope (.card) {
    img {
        border-color: green;
    }
}

Obtén más información en Limita el alcance de tus selectores con la regla @scope de CSS.

scrollend

Otra función que reduce la complejidad y mejora las interfaces de desplazamiento es scrollend. Sin el evento scrollend, no hay una forma confiable de detectar que se completó un desplazamiento.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Con el evento scrollend, el navegador realiza toda esta difícil evaluación por ti.

document.onscrollend = event => {…}

Consulta más ejemplos en Scrollend, un nuevo evento de JavaScript.

Transiciones de vista del mismo documento

Por último, pero no menos importante, las transiciones de vista forman parte de Interop 2025. El trabajo incluye transiciones de vista del mismo documento, por lo que las de apps de una sola página y las de clases de transiciones de vista también.

Sigue el panel de Interop 2025 para ver cómo se desarrolla el proyecto a medida que avanza el año.

Las funciones incluidas en Interop 2025 no serán las únicas que formen parte del Baseline este año, pero su inclusión en los proyectos nos da una señal bastante buena de que son prioritarias y que pronto estarán disponibles.

Apenas estamos empezando

Este fue un año emocionante para Baseline, y hemos avanzado mucho desde nuestros anuncios del año pasado. Ahora estamos en una posición en la que se completó el reabastecimiento de los datos de las funciones web. Esto abrió las compuertas y permitió que se crearan herramientas para desarrolladores. Realmente estamos empezando, y si tienes un producto o una herramienta de código abierto que se beneficiaría de incluir estos datos, nos encantaría saber de ti.

No te pierdas las novedades de web.dev, ya que seguiremos publicando anuncios sobre herramientas nuevas junto con instructivos para ayudarte a aprovechar todo lo que la Web tiene para ofrecer.